<template>
  <div class="getInfoSearch">
    <!-- 组件只用来信息显示 -->
    <!-- select 的 v-model绑定的值只有在options选中后在会被修改-->
    搜索：
    <!-- <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="allSelect"
      >全选</el-checkbox
    > -->
    <!-- select 选中后是将label存储在新的数组中 -->
    <el-checkbox-group v-model="searchInfo.chartSignSelect" @change="checkSelect">
      <el-checkbox v-for="city in searchInfo.chartSign" :label="city.label" :key="city.label">{{
        city.value
      }}</el-checkbox>
    </el-checkbox-group>
    <el-select
      placeholder="请输入搜索信息"
      prefix-icon="el-icon-search"
      filterable
      remote
      clearable
      v-model="searchKeyWord"
      :remote-method="setSearchFun"
      @change="setSearchBackDataFun()"
    >
      <el-option
        v-for="(item, index) in searchInfo.info"
        :key="item.id"
        :label="item.ident"
        :value="item.ident"
      >
        <!-- :label显示值 value传递值 -->
        <span style="float: left">{{ item.ident }}</span>
        <!-- 航点 -->
        <span style="float: right; color: #8492a6; font-size: 13px" v-if="item.type == 1"
          >航点</span
        >
        <!-- 航道 -->
        <span style="float: right; color: #8492a6; font-size: 13px" v-if="item.type == 2"
          >航道</span
        >
        <!-- 港口搜索 -->
        <span style="float: right; color: #8492a6; font-size: 13px" v-if="item.type == 4">{{
          item.port.name
        }}</span>
        <!-- 泊位搜索 -->
        <!-- <span
          v-if="item.type == 8 && item.berth && item.berth.port"
          style="float: right; color: #8492a6; font-size: 13px"
          >{{ item.berth.port.name }}</span
        > -->
      </el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  name: 'getInfoSearch',
  components: {},
  props: {
    searchInfo: {
      type: Object,
      required: true,
    },
    setSearchFun: {
      type: Function,
      defalut: function() {
        return;
      },
      required: true,
    },
  },
  data() {
    return {
      searchKeyWord: '',
      // 选择框代码
      checkAll: false,
      isIndeterminate: true,
    };
  },
  created() {},
  mounted() {},
  methods: {
    setSearchBackDataFun() {
      console.log('选择指定信息后放回需要的数据');
      this.setSearchFun(this.searchKeyWord, true);
    },
    // 选择框代码
    allSelect(val) {
      this.searchInfo.chartSignSelect = val ? this.searchInfo.chartSign : [];
      this.isIndeterminate = false;
    },
    checkSelect(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.searchInfo.chartSign.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.searchInfo.chartSign.length;
      this.searchInfo.info = [];
    },
  },
  watch: {},
};
</script>
<style lang="less" scoped>
/deep/.el-checkbox-group {
  // display: flex;
  // flex-wrap: wrap;
  // justify-content: space-between;
}
/deep/.el-checkbox {
  margin-right: 15px;
}
</style>
